<%--
  Created by IntelliJ IDEA.
  User: 孤焰
  Date: 2021/6/14
  Time: 14:20
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>购物车列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <a>购物车列表</a>
                </div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="cart-list" lay-filter="cart-list"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="${pageContext.request.contextPath}/layuiadmin/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/static/js/axios.min.js"></script>
<script>
    layui.config({
        base: '${pageContext.request.contextPath}/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'form', 'layer', 'dropdown'], function(){
        var admin = layui.admin
        var table = layui.table;
        var form = layui.form;
        var dropdown = layui.dropdown;

        var tableWhere = {};
        tableWhere.userId = '${user.id}';
        table.render({
            id: 'cartList',
            elem: '#cart-list',
            url: '${pageContext.request.contextPath}/cart/cartList',
            where: tableWhere,
            cols: [[
                {type: 'checkbox'},
                {
                    title: '商品名',
                    templet: function (data) {
                        return data.product.name;
                    }
                },
                {title: '数量', field:'quantity', width: 120, sort: true, edit: 'text'}

            ]],
            page: true,
            toolbar: 'default'
        });

        //监听搜索表单
        // form.on('submit(search)', function (data) {
        //     tableWhere.search = data.field.search;
        //     table.reload('shippingList');
        //     return false;
        // });

        //监听单元格编辑
        table.on('edit(cart-list)', function (obj) {
            var id = obj.data.id;
            var quantity = obj.data.quantity;

            //正整数正则校验
            var quantityReg = /^[1-9]\d*$/;
            if (quantityReg.test(quantity)) {
                var param = {
                    id: id,
                    quantity: quantity
                }

                axios.post('${pageContext.request.contextPath}/cart/updateCartById', param).then(function (res){
                    console.log(res);
                    if (res.data.code == 200) {
                        layer.msg("修改成功", {icon: 6});
                    } else {
                        layer.msg("修改失败", {icon: 5});
                    }

                });
            } else {
                layer.msg("值不合法", {icon: 5});
                // TODO 提示完不合法之后单元格没有恢复正确值
            }
        });

        //单元格表头工具栏监听
        table.on('toolbar(cart-list)', function(obj) {
            switch (obj.event) {
                case 'add':
                    top.layui.index.openTabsPage('${pageContext.request.contextPath}/cart/cartAdd', "购物车增加");
                    break;
                case 'delete':
                    var checkBoxData = table.checkStatus('cartList').data;
                    if (checkBoxData.length == 0) {
                        layer.msg('未选中数据项', {icon: 5});
                        return;
                    }

                    layer.confirm('你确认删除吗?', {title:'提示'}, function(index){
                        var idArr = [];
                        for (var i = 0; i < checkBoxData.length; i++) {
                            idArr.push(checkBoxData[i].id);
                        }

                        axios.post('${pageContext.request.contextPath}/cart/batchDelCart', idArr).then(function (res) {
                            if (res.data.code != 200) {
                                layer.msg('数据库遇到未知错误，删除失败', {icon: 5});
                            } else {
                                layer.msg('数据删除成功', {icon: 6});
                                table.reload('cartList');
                            }
                        });

                        layer.close(index);
                    });
                    break;
                case 'update':
                    var checkBoxData = table.checkStatus('cartList').data;
                    if (checkBoxData.length == 0) {
                        layer.msg('未选中数据项', {icon: 5});
                        return;
                    }
                    if (checkBoxData.length > 1) {
                        layer.msg('数据项不可以多选', {icon: 5});
                        return;
                    }

                    layer.open({
                        type: 2,
                        title: '购物车编辑',
                        shadeClose: false,
                        shade: 0,
                        area: ['60%', '90%'],
                        content: '${pageContext.request.contextPath}/cart/cartUpdate?id='+checkBoxData[0].id //iframe的url
                    });
                    break;
            }
        });
    });
</script>
</body>
</html>
